<template>
    <div class="wrapper">
        <div v-for="(item, index) in items" :key="item.id" class="videoWrapper">
            <div
                className="vxgplayer"
                ref='vxgplayer'
                :id=index
                nmf-src="../../../static/vxg/pnacl/Release/media_player.nmf"
                nmf-path="media_player.nmf"
                class="vxgplayer"
                :url=item.src
                latency="3000000"
                autostart
                controls
                avsync
            >
            </div>
        </div>
    </div>
</template>

<script>
export default {
  name: "List",
  data() {
    return {
      items: [
        { src: "rtsp://117.159.206.253:33310/video19216812157", id: "src0" },
        { src: "rtsp://117.159.206.253:33310/video19216812157", id: "src1" },
        { src: "rtsp://117.159.206.253:33310/video19216812157", id: "src2" },
        { src: "rtsp://117.159.206.253:33310/video19216812157", id: "src2" }
      ]
    };
  },
  mounted() {
    for (var i = 0; i < this.items.length; i++) {
      this.play(i);
    }
  },
  methods: {
    play(id) {
      vxgplayer(id).play();
      vxgplayer(id).size("95%", "95%"); // set size
    }
  }
};
</script>

<style lang="scss" scoped>
.wrapper {
  width: 100vw;
  height: 100vh;
  display: flex;
  flex-wrap: wrap;
  flex-direction: row;
  overflow: scroll;
  .videoWrapper {
    box-sizing: border-box;
    width: 50%;
    height: 60%;
    padding-top: 20vh;
  }
}
</style>
